<template>
    <van-popup
            class="wdp-6 fullWin"
            v-model="visible"
            :closeable="false"
            close-icon="close"
            position="bottom"
    >

        <bpm-nav-bar :title="title" :leftArrow="true" @close="close"></bpm-nav-bar>

        <van-cell-group>
            <van-cell>
                <h3>办理意见</h3>
            </van-cell>

            <van-field
                    v-model="message"
                    rows="5"
                    maxlength="50"
                    show-word-limit
                    autosize
                    type="textarea"
                    placeholder="请输入您的办理意见"
            />
        </van-cell-group>

        <user-group v-if="needUser" :actorUserList="actorUserList" :actorDeptList="actorDeptList" v-model="userList"
                    :isRadio="isRadio"></user-group>

        <van-grid column-num="2" class="py-5">
            <van-grid-item>
                <van-button type="default" size="large" @click="close">取消</van-button>
            </van-grid-item>
            <van-grid-item>
                <van-button type="primary" size="large" @click="handleOk">确定</van-button>
            </van-grid-item>
        </van-grid>
    </van-popup>
</template>

<script>

    import bpmNavBar from '../../../components/bpmNavBar';
    import userGroup from './userGroup';

    //TODO 浮层内嵌浮层
    export default {
        name: 'flowIdeaPopup',
        components: {
            bpmNavBar,
            userGroup,
        },
        data() {
            return {
                visible: false,
                title: null,
                needUser: false,
                transition: {},
                userList: [],
                message: '',
                actorUserList: [],
                actorDeptList: [],
                taskId: null,
                targetActivityId: null,
                operateType: null,
                isRadio: false,
                url: {
                    getActors: "/api/bpm/bpm-front/mobileRest/getActors/v1"
                }
            }
        },
        methods: {
            close() {
                this.visible = false;
            },
            init(button) {
                this.title = button.label;
                this.needUser = false;
                this.transition = {};
                this.userList = [];
                this.message = button.attribute.defaultMessage || '';
                this.actorUserList = [];
                this.actorDeptList = [];
                this.isRadio = false;
                this.taskId = button.attribute.taskId;
                this.operateType = button.type;
                this.targetActivityId = button.attribute.targetActivityId;
            },
            open(button) {
                this.init(button);
                this.needUser = true;
                this.initActorUserList();
                this.visible = true;
            },
            openNoUser(button) {
                this.init(button);
                this.visible = true;
            },
            openForSubmit(button, transition) {
                this.init(button);
                this.transition = transition || {};
                this.title = '下一步骤是：' + transition.targetActivityName;
                this.needUser = transition.needSelectUser;
                this.targetActivityId = transition.targetActivityId;
                if (this.needUser) {
                    this.initActorUserList();
                }
                this.visible = true;
            },
            initActorUserList() {
                this.$mask.open();
                this.$http.get(this.url.getActors, {
                    params: {
                        taskId: this.taskId,
                        targetActivityId: this.targetActivityId,
                        operateType: this.operateType
                    }
                }).then((res) => {
                    if (res.success) {
                        this.actorUserList = res.result.users || [];
                        this.actorDeptList = res.result.depts || [];
                        this.isRadio = res.result.radio;
                    } else {
                        this.$notify({type: 'warning', message: res.message});
                    }
                }).catch(() => {
                    this.$notify({type: 'warning', message: '请求发生错误'});
                }).finally(() => {
                    this.$mask.close();
                });
            },
            handleOk() {
                let userList = this.userList.map(item => item.userKey);
                if (this.needUser) {
                    if (userList.length == 0) {
                        this.$notify({type: 'warning', message: "请选接收人"});
                        return;
                    }
                }
                const returnData = {
                    message: this.message
                };
                if (this.transition.id) {
                    const userListMap = {};
                    userListMap[this.transition.id] = userList;
                    returnData['userListMap'] = userListMap;
                } else {
                    returnData['userList'] = userList;
                }
                this.$emit('selectUserBack', returnData);
                this.close();
            }
        }
    }
</script>
